import { random } from "@/utils"
import * as THREE from "three";
import { getDepth } from "../map"
import * as material from "../material"

const texture = new THREE.TextureLoader()
// 创建背景
export const createBg = (size, center) => {
  const width = size.x < size.y ? size.y + 1 : size.x + 1;
  const group = new THREE.Group()
  group.name = '背景'
  // 1. 底部背景图
  const mesh = createBgMesh(width * 4, require('@/images/bg/scene-bg2.png'), 0xffffff)
  // 2. 底部网格
  const circle = createBgMesh(width * 1.5, require('@/images/bg/circle-point.png'), 0x00ffff)
  circle.position.z = -0.1

  // 3. 底部光圈
  const aperture = createBgMesh(width * 1, require('@/images/bg/rotatingAperture.png'),)
  aperture.animate = (cube) => {
    cube.rotation.z += 0.001
  }
  aperture.translateZ(0.1)
  // 4. 底部点状光圈
  const point = createBgMesh(width * 1, require('@/images/bg/rotating-point2.png'),)
  // 旋转动画
  point.animate = (cube) => {
    cube.rotation.z -= 0.001
  }
  point.scale.set(1.2, 1.2, 1.2);
  point.translateZ(0.2)


  // 5. 上升粒子
  const particles = createParticle(size, center)
  group.add(mesh, circle, aperture, point, ...particles)
  // group.position.set(center.x, center.y, center.z);
  group.rotateX(-Math.PI / 2)
  return group
}

export function createBgMesh(width, image) {
  const newMaterial = material.bg.clone()
  newMaterial.map = texture.load(image)
  const plane = new THREE.PlaneGeometry(width, width)
  const mesh = new THREE.Mesh(plane, newMaterial)
  mesh.disabled = true
  mesh.colorName = 'bg'
  return mesh
}

// size, center 中间地图大小和中心点
export function createParticle(size, center) {
  let { max } = getDepth(size)
  max = max > 10 ? max : 10
  // 构建范围，中间地图的2倍
  let minX = center.x - size.x;
  let maxX = center.x + size.x;
  let minY = center.y - size.y;
  let maxY = center.y + size.y;
  let minZ = -max;
  let maxZ = max;
  let particleArr = [];
  const group = new THREE.Group();
  // 配置
  const pTexture = texture.load(require('@/images/bg/particle.png'))
  const options = { frame: 9, column: 9, row: 1, speed: 0.5 }
  for (let i = 0; i < 16; i++) {
    // 创建粒子模型
    const particleTexture = pTexture
    // particleTexture.wrapS = THREE.RepeatWrapping;
    particleTexture.repeat.set(1 / options.column, 1 / options.row); // 从图像上截图第一帧
    const particleMaterial = material.bg.clone()
    particleMaterial.map = particleTexture
    const particle = new THREE.Mesh(new THREE.PlaneGeometry(max * 20, max * 20), particleMaterial);
    let particleScale = random(5, 10) / 1000;
    particle.scale.set(particleScale, particleScale, particleScale);
    particle.rotation.x = Math.PI / 2;
    let x = random(minX, maxX);
    let y = random(minY, maxY);
    let z = random(minZ, maxZ);
    particle.position.set(x, y, z);
    particle.colorName = 'bg'
    let num = 0
    particle.animate = (cube, t) => {
      num += options.speed;
      if (num > options.frame) num = 0;
      particleTexture.offset.x = (options.column - Math.floor(num % options.column) - 1) / options.column; // 动态更新纹理偏移 播放关键帧动画
      particleTexture.offset.y = Math.floor((num / options.column) % options.row) / options.row; // 动态更新纹理偏移 播放关键帧动画
      // y坐标每次加t * 1
      cube.position.z += t * 0.03 * max;
      if (cube.position.z > max) {
        cube.position.z = z;
      }
    }
    particleArr.push(particle);
    group.add(particle)
  }
  return [group]
}
